<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        /* #content { */
        /* visibility: hidden; */
        /* visibility: hidden;占位(占文档流)隐藏 ;opacity:0;透明度0
             dispaly:none; 不占位(脱离文档流隐藏) */

        /* 行内块 不换行 可以做盒子 设置宽高
            display: inline-block;
            /* inline 行内元素 不能设置宽高 */
        /* width: 200px;
            height: 200px;
            background-color: green;
            transform: scale(0, 0); 缩放到0 */

        /* display: inline-block;
            transform: translate(-100%);//相对于 元素本身 移动 */


        /* } */
    </style>
</head>

<body>
    <div id="app">

        <div id="ep1">
            <span id="content">剽悍的人生不需要解释</span>
            <input type="text" name="" id="input" value="剽悍的人生不需要解释">
            <input type="button" value="save" id="save">
            <input type="button" value="cancel" id="cancel">
        </div>
    </div>
    <script>// js 实现 切换/隐藏
        // js基于原型式的面向对象
        function EditInPlace() {
            // 把DOM元素作为属性
            this.content = document.getElementById('content');
            this.cancel = document.getElementById('cancel');
            this.input = document.getElementById('input');
            this.content = document.getElementById('content');
        }
        EditInPlace.prototype = {
            // 罗列方法
            convertToText() {
                this.content.style.display = 'inline';
                this.save.style.display = 'none';
                this.cancel.style.display = 'none';
                this.input.style.display = 'none';
            },
            convertToEdit() {
                this.content.style.display = 'none';
                this.save.style.display = 'inline';
                this.cancel.style.display = 'inline';
                this.input.style.display = 'inline';
            },
            bindEvents() {
                let thisa = this;//作用域链
                this.content.addEventListener('dblclick', function () {
                    // 如果函数是事件的回调函数,this 指向元素
                    // this.convertToEdit(); this 丢失,被覆盖

                    // thisa.convertToEdit(); // 作用域链指定this 解决
                    input.focus();//自动聚焦
                })
                this.content.addEventListener('dblclick', () => {
                    this.convertToEdit();//箭头函数没有this,this根据作用域链,向上级搜索,找到bindEvent的this,即构造的editor;
                })
            }
        }
        window.onload = function () {
            let editor = new EditInPlace();
            editor.convertToText();
        }



        // //函数式编程 1.封装 2.执行 3.复用 (功能复杂,流程式的代码不适合)
        // const save = document.getElementById('save');
        // const cancel = document.getElementById('cancel');
        // const input = document.getElementById('input');
        // const content = document.getElementById('content');
        // // DOM 动态演示
        // function convertToText() {
        //     content.style.display = 'inline';
        //     save.style.display = 'none';
        //     cancel.style.display = 'none';
        //     input.style.display = 'none';
        // }
        // convertToText();

        // function convertToEdit() {
        //     content.style.display = 'none';
        //     save.style.display = 'inline';
        //     cancel.style.display = 'inline';
        //     input.style.display = 'inline';
        // }

        // content.addEventListener('dblclick', function () {
        //     convertToEdit();
        //     input.focus();//自动聚焦
        // })

        // save.addEventListener('click', function () {
        //     // 拿到当前的值,并动态设置span
        //     const val = input.value;
        //     content.innerText = val;
        //     convertToText();
        // })

        // cancel.addEventListener('click', function () {
        //     input.value = '';
        //     input.focus();
        // })
    </script>
</body>

</html>